<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container"> 
    <form name="loginForm">
        <div class="form-group">
            <!-- 无障碍 把用户当小白 -->
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" required class="form-controller" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required class="form-controller" minlength="6" maxlength="16" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="card">卡号</label>
            <input type="password" id="card" disabled class="form-controller" minlength="6" maxlength="16" placeholder="请输入卡号">
        </div>
        <div class="checkbox">
            <label for="">
                <input type="checkbox" name="favor" value="1"> remember me
            </label>
            <label for="">
                <input type="checkbox" name="favor" value="2"> haohao
            </label>
            <label for="">
                <input type="checkbox" name="favor" value="3"> bucuo
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

    <script>
        const oForm=document.forms['loginForm'];
        
        HTMLFormElement.prototype.serialize=function(){
            //   console.log(this,',,,,,')
            let form=this;
            let arrFormData=[],
                objFormFata={};

            // 类数组
            [].slice.call(form.elements).forEach(function(ele){
                // console.log(ele);
                let type=ele.type,disabled=ele.disabled;
                // encodeURIComponent 不转义的字符：
                // A-Z a-z 0-9 - _ . ! ~ * ' ( )  其余都转义
                // decodeURIComponent 解码
                let name=ele.name,value=encodeURIComponent(ele.value || 'on');
                if( !name 
                    || disabled 
                    || !type 
                    || /^reset|submit|image$/i.test(type) 
                    || ((/^checkbox|radio$/i.test(type) && !ele.checked))){
                    return ;
                }
                type=type.toLowerCase();
                if(type !== 'select-multiple'){
                    if(objFormFata[name]){
                        objFormFata[name].push(value);
                    }
                    else{
                        objFormFata[name]=[value];
                    }
                }
                else{

                }
            })

            console.log(objFormFata);
            for (let key in objFormFata){
                arrFormData.push(key+'='+objFormFata[key].join())
            }
            return  arrFormData.join('&');

            // form.elements.form().forEach(element => {
            //     console.log(element)
            // });
            console.log(Object.prototype.toString.call(form.elements));
        }
        
        oForm.addEventListener('submit',function(event){
            event.preventDefault();
            // 收集表单的值  {name: value ,name1:value1}
            // json.stringfy()
            // fetch(url?data=)
            // console.log(this.__proto__);
            let dataStr=this.serialize();
            console.log(dataStr);
        })
    </script>
</body>
</html>